<script lang="ts" setup>
import { reactive, provide, ref, watch, onMounted } from 'vue';
import { tabsProps, tabsEmits } from './tabs';
import { TabsPaneContext } from '../../../tokens/tabs';
import { tabsRootContextKey } from '../../../tokens/tabs';
import Common from '@/utils';
defineOptions({ name: 'WindowsTabs' });
const props = defineProps(tabsProps);
const emits = defineEmits(tabsEmits);
const panes = reactive<Array<TabsPaneContext>>([]);
//当前选中的Tab
const currentName = ref(props.modelValue || '0');
//上一个选中的Tab
const lastCurrentName = ref(currentName.value);
//注册pane
const registerPane = (pane: TabsPaneContext) => {
  panes.push(pane);
  currentName.value = pane.props.name;
};
//移除pane
const unregisterPane = (tabName: string | number) => {
  for (let i = panes.length - 1; i >= 0; i--) {
    if (panes[i].props.name == tabName) {
      panes.splice(i, 1);
    }
  }
  choosePane(tabName);
};
const removePane = (tabName: string | number) => {
  emits('tab-remove', tabName);
};
//最小化pane
const minimizePane = (tabName: string | number) => {
  for (let i = panes.length - 1; i >= 0; i--) {
    let pane = panes[i];
    if (pane.props.name == tabName) {
      pane.minimize = true;
    }
  }
  choosePane(tabName);
};
const handleTabClick = (tabName: string | number) => {
  currentName.value = tabName;
  for (let i = panes.length - 1; i >= 0; i--) {
    if (panes[i].props.name == tabName) {
      panes[i].minimize = false;
    }
  }
  emits('tab-click', tabName);
};
//关闭或最小化pane设置其他pane选中
const choosePane = (tabName: string | number) => {
  let last: string | number = '';
  for (let i = panes.length - 1; i >= 0; i--) {
    let pane = panes[i];
    if (!pane.minimize) {
      if (lastCurrentName.value == pane.props.name) {
        last = lastCurrentName.value;
      } else if (last == '' && pane.props.name != tabName) {
        last = pane.props.name;
      }
    }
  }
  currentName.value = last;
};
watch(
  () => props.modelValue,
  value => {
    currentName.value = value;
  }
);
watch(
  () => props.currentTab,
  value => {
    currentName.value = value;
  }
);
watch(
  () => currentName.value,
  (newValue, oldValue) => {
    lastCurrentName.value = oldValue;
    emits('update:currentTab', newValue);
  }
);
provide(tabsRootContextKey, {
  currentName,
  registerPane,
  unregisterPane,
  minimizePane,
  removePane,
});
</script>

<template>
  <div class="windows-tabs">
    <div class="windows-tabs__header">
      <div class="windows-tabs__nav">
        <transition-group appear enter-active-class="animate__animated animate__fadeIn animate__fast" leave-active-class="animate__animated animate__fadeOut animate__fast">
          <div v-for="item in panes" :key="item.props.name" @click="handleTabClick(item.props.name)" :class="[item.active ? 'active' : '', 'windows-tabs__item']">
            <div class="windows-tab__wrapper">
              <el-image style="width: 25px" :src="item.props.icon" fit="contain" />
              <span>{{ item.props.label }}</span>
            </div>
            <div class="windows-tabs__line"></div>
          </div>
        </transition-group>
      </div>
    </div>
    <div class="windows-tabs__content">
      <transition-group appear enter-active-class="animate__animated animate__zoomIn animate__faster" leave-active-class="animate__animated animate__zoomOut animate__fast">
        <slot></slot>
      </transition-group>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.windows-tabs {
  display: flex;
  height: 100%;
  .windows-tabs__header {
    display: flex;
    .windows-tabs__nav {
      user-select: none;
      display: flex;
      height: 100%;
      .windows-tabs__item {
        box-sizing: border-box;
        padding: 0px 15px;
        border-radius: 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
        font-size: 12px;
        color: #fff;
        margin-right: 5px;
        position: relative;
        &:hover,
        &.active {
          background: rgba(220, 220, 220, 0.15);
        }
        .windows-tab__wrapper {
          display: flex;
          align-items: center;
          flex: 1;
          > span {
            margin-left: 5px;
          }
        }
        .windows-tabs__line {
          height: 1px;
          background: #c0c4cc;
          border-radius: 10px;
          width: 90%;
          position: absolute;
          bottom: 0;
          //padding: 0px 10px;
        }
      }
    }
  }
  .windows-tabs__content {
    position: absolute;
  }
}
</style>
